---
import Datetime from './Datetime.astro';

export interface Props {
  title?: string;
  pubDatetime: string | Date;
  modDatetime: string | Date | undefined;
}

const { title, pubDatetime, modDatetime } = Astro.props;
---

<section
  id="back-to-top"
  class="invisible fixed top-0 right-0 left-0 z-9 max-w-none border-b px-0 shadow-xs"
>
  <div class="max-w-app mx-auto flex w-full items-center justify-between px-4">
    <div class="min-width-0 my-2 flex flex-col">
      <a class="text-sm font-bold hover:underline" href="#top">
        {title}
      </a>

      <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} size="xs" class="flex-wrap" />
    </div>

    <a href="#top" class="hidden sm:block">
      <span class="cursor text-xs hover:underline">Back to top</span>
    </a>
  </div>
</section>

<script is:inline data-astro-rerun>
  function detectedBackToTopVisible() {
    document.addEventListener('scroll', () => {
      if (!document) return;

      const rect = document.getElementById('nav-container').getBoundingClientRect();
      if (rect.top + rect.height < -50) {
        document.getElementById('back-to-top').classList.remove('invisible');
      } else {
        document.getElementById('back-to-top').classList.add('invisible');
      }
    });
  }
  detectedBackToTopVisible();
</script>

<style>
  #back-to-top {
    background-color: var(--background);
  }
</style>
